<template>
  <template v-if="metaLoaded">
    <DataTable :url="meta.listApi"  ref="ds" pageable>
      <template v-if="searchControls.length>0" #search="{params}">
        <component v-for="comp in searchControls" :is="comp.control" v-model="params[comp.field]" v-bind="comp.props"/>
      </template>
      <template #tools="table">
        <Button icon="jeicon-add" color="primary" @click="dataForm.open()">新增</Button>
      </template>
      <template #default="table">
        <TableGrid :datas="table.data" :loading="table.loading" @edit="onEdit"></TableGrid>
      </template>
    </DataTable>
    <Modal v-model="dataForm.opened" :closeOnMask="false" type="drawer-right" hasDivider hasCloseIcon>
      <template #header>详情</template>
      <Form :model="dataForm.data" :rules="dataForm.rules" :mode="meta.formMode" style="width:600px">
        <FormItem v-for="it in dataForm.items" :label="it.title">
          <component :is="it.control"  v-model="dataForm.data[it.field]" v-bind="it.props"/>
        </FormItem>
      </Form>
      <template #footer>
        <Button class="h-btn" @click="dataForm.opened=false">取消</Button>
        <Button :loading="dataForm.loading" class="h-btn h-btn-primary" >确定</Button>
      </template>
    </Modal>
  </template>
</template>
<script setup>
  import {useTableMeta} from "./tablemeta.js";

  import {useRoute} from 'vue-router'


  const route=useRoute();
  console.log(route)
  const {metaLoaded,meta,TableGrid,searchControls,dataForm}=useTableMeta('7clgajktt1xel7ogmh4wz5pbp')
  function onEdit(dt){
    console.log(dt)
   // meta.dlgOpening=true
  }
</script>
